<template>
  <div class="cart_container">
    <div class="logo">
      <div class="logo_img">
        <img src="../../assets/icon/login/login_logo.png" alt="" />
      </div>
    </div>

    <div class="main">
      <div class="main_box">
        
        <!-- <component :is="compName" @change-psw="getChangePsw"></component> -->
        <div class="register_bar">
    <div class="tab_btns">
      <a class="active">找回密码</a>
    </div>
    <form>
      <div class="form_group account_bar">
        <i class="account_icon"> </i>
        <input
          type="text"
          placeholder="请输入账号"
          maxlength="11"
          v-model="phone"
        />
      </div>
      <div class="form_group code_bar">
        <i class="code_icon"> </i>
        <input
          type="text"
          placeholder="请输入验证码"
          v-model="captcha"
          maxlength="6"
        />
        <button class="codeBtn" @click="seedCode" v-show="!isShowCode">
          获取验证码
        </button>
        <button class="codeBtn bb" v-show="isShowCode">剩余{{ count }}s</button>
      </div>

      <div class="form_group psw_bar">
        <i class="psw_icon"> </i>
        <input type="password" placeholder="请输入密码" v-model="psw" />
      </div>
    </form>
    <div class="registerBtn" @click="getRegister" >确认</div>
    
  </div>
        
        <div class="info" @click="tabComponent" >
          
          <span >立即登录</span>
        </div>
      </div>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
import LoginBar from "@/views/login/LoginBar.vue";
import RegisterBar from "@/views/login/RegisterBar.vue";
import { Toast } from "vant";
export default {
  name: "Login",
  data() {
    return {
     
      compName: "LoginBar",
      
      flag:true,

      phone: "",
      captcha: "",
      psw: "",
      // 第一次进来的时候 要获取key
      sendKey: "",
      isShowCode: false,
      timer: null,
      count: 0,
    };
  },
  created() {
    let pro = axios.get("/api/verify_code").then((response) => {
      this.sendKey = response.data.data.key;
    });
  },
  methods: {
    tabComponent() {
      this.$router.push('/login')
    },

    getCode() {
      let url = "";
      let pro = axios
        .post("/api/register/verify", {
          code: "",
          key: this.sendKey,
          phone: this.phone,
         
        })
        .then((response) => {
          console.log("发送验证码成功", response.data);
          if (response.data.status == 401) {
            Toast({
                message: response.data.msg,
                icon: "close",
              });
            
          } else if (response.data.status == 400) {
            if (response.data.msg == "手机号已注册") {
              
              Toast({
                message: response.data.msg,
                icon: "close",
              });
            }
            this.isShowCode = false;
          } else {
            Toast.success({
                message: response.data.msg,
              
              });
            this.isShowCode = true;
          }
        })
        .catch((err) => {
          console.log("获取验证码失败");
        });
    },
    seedCode() {
      let reg = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/;
      if (this.phone.length == 0) {
        this.$toast.show("请输入手机号码", 800);
        return;
      } else if (reg.test(this.phone) == false && this.phone.length > 0) {
        this.$toast.show("请输入正确的手机号码", 800);
        return;
      }

      let curCount = 60;
      if (!this.timer) {
        this.count = curCount;
        // 获取验证码 208725
        this.getCode();
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= curCount) {
            this.count--;
          } else {
            this.isShowCode = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },

    getRegister() {
      let reg = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/;
      if (this.phone.length == 0) {
        this.$toast.show("请输入手机号码", 800);
        return;
      } else if (reg.test(this.phone) == false && this.phone.length > 0) {
        this.$toast.show("请输入正确的手机号码", 800);
      } else if (this.captcha.length == 0) {
        this.$toast.show("请输入验证码", 800);
        return;
      } else if (this.psw.length == 0) {
        this.$toast.show("请输入密码", 800);
        return;
      } else if (reg.test(this.phone) == false && this.phone.length > 0) {
        this.$toast.show("请输入正确的手机号码", 800);
      }

      
      let pro = axios
        .post("/api/register/reset", {
          account:this.phone,
          captcha:this.captcha,
          password:this.psw,
          code:""
        })
        .then((response) => {
          console.log("发送验证码成功", response.data);
          if (response.data.status == 401) {
            Toast({
                message: response.data.msg,
                icon: "close",
              });
            
          } else if (response.data.status == 400) {
          
              
              Toast({
                message: response.data.msg,
                icon: "close",
              });
            
           
          } else {
            Toast.success({
                message: response.data.msg,
                
              });
            this.$router.push('/login')
          }
        })
        .catch((err) => {
          Toast({
                message:"注册操作失败",
                icon: "close",
              });
        });
    },

    getReset(){
      let reg = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/;
      if (this.phone.length == 0) {
        this.$toast.show("请输入手机号码", 800);
        return;
      } else if (reg.test(this.phone) == false && this.phone.length > 0) {
        this.$toast.show("请输入正确的手机号码", 800);
      } else if (this.captcha.length == 0) {
        this.$toast.show("请输入验证码", 800);
        return;
      } else if (this.psw.length == 0) {
        this.$toast.show("请输入密码", 800);
        return;
      } else if (reg.test(this.phone) == false && this.phone.length > 0) {
        this.$toast.show("请输入正确的手机号码", 800);
      }

      
      let pro = axios
        .post("/api/register", {
          account:this.phone,
          captcha:this.captcha,
          password:this.psw,
          code:""
        })
        .then((response) => {
          console.log("发送验证码成功", response.data);
          if (response.data.status == 401) {
            Toast({
                message: response.data.msg,
                icon: "close",
              });
            
          } else if (response.data.status == 400) {
          
              
              Toast({
                message: response.data.msg,
                icon: "close",
              });
            
           
          } else {
            Toast.success({
                message: response.data.msg,
                
              });
            this.$router.go(0)
          }
        })
        .catch((err) => {
          Toast({
                message:"找回操作失败",
                icon: "close",
              });
        });
    }
  },
  components: {
    LoginBar,
    RegisterBar,
  },
};
</script>
<style lang="scss" scoped>
.cart_container {
  width: 100%;
  height: 100vh;
  background: #000;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#eb5447),
    to(#ff8e3b)
  );
  background-image: linear-gradient(180deg, #eb5447 0, #ff8e3b);
  background-image: -moz-linear-gradient(to bottom, #eb5447 0, #ff8e3b 100%);
  .logo {
    height: 143px;
    background: url(../../assets/icon/login/bg.png) no-repeat;
    background-size: contain;
    padding-top: 55px;
    .logo_img {
      width: 82px;
      height: 82px;
      border-radius: 50%;
      overflow: hidden;
      background: #fcdfda;
      margin: 0 auto;
      > img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .main {

    margin-top:50px ;
    .main_box {
      margin: 0 auto;
      width: 304px;
      padding: 22.5px 15px 0;
      border-radius: 8px;
      background-color: #fff;
      .tab_btns {
        display: flex;
        justify-content: center;
        align-items: center;

        a {
          display: inline-block;
          color: #999;
          font-size: 16px;

          font-weight: 700;
          padding: 0 3px 5px;
          margin: 0 16px;
        }
        a.active {
          // font-size: 17px;
          color: #282828;
        //   border-bottom: 2px solid #f35749;
        }
      }

      .loginBtn {
        height: 43px;
        line-height: 43px;
        font-size: 16px;
        color: #fff;
        font-weight: 700;

        border-radius: 21.5px;
        background: -webkit-gradient(
          linear,
          left top,
          right top,
          from(#f35447),
          to(#ff8e3c)
        );
        background: linear-gradient(90deg, #f35447 0, #ff8e3c);
        background: -moz-linear-gradient(to right, #f35447 0, #ff8e3c 100%);
        text-align: center;

        margin-top: 20px;
      }
      .info {
        height: 55px;
        text-align: center;
        line-height: 55px;
        font-size: 15px;
        color: #333;
        span {
          color: #fc4141;
        }
      }
    }
  }

  .bottom {
    width: 304px;
    height: 22px;
    margin: 0 auto;
    background: url(../../assets/icon/login/bottom.png) no-repeat;
    background-size: 100% 100%;
    background-position: center top;
  }
}

.tab_btns {
  display: flex;
  justify-content: center;
  align-items: center;

  a {
    display: inline-block;
    color: #282828;
    font-size: 16px;

    font-weight: 700;
    padding: 0 3px 5px;
    // margin: 0 16px;
  }
}

.registerBtn {
  height: 43px;
  line-height: 43px;
  font-size: 16px;
  color: #fff;
  font-weight: 700;

  border-radius: 21.5px;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#f35447),
    to(#ff8e3c)
  );
  background: linear-gradient(90deg, #f35447 0, #ff8e3c);
  background: -moz-linear-gradient(to right, #f35447 0, #ff8e3c 100%);
  text-align: center;

  margin-top: 20px;
}

.form_group {
  height: 50px;
 
  border-bottom: 1px solid #ededed;
  position: relative;
  > input {
    position: absolute;
    top: 23px;
    left: 33px;
    height: 20px;
    width: 240px;
    // background: pink;
    outline: none;
    border: 0;
    color: #333;
    font-size: 16px;
  }
  > i {
    position: absolute;
    left: 10px;
    bottom: 7px;
    display: block;
  }
  .account_icon {
    width: 18px;
    height: 18px;
    background: url(../../assets/icon/login/phone.svg) no-repeat;
    background-size: 100% 100%;
  }
  .code_icon {
    width: 16px;
    height: 16px;
    background: url(../../assets/icon/login/code.svg) no-repeat;
    background-size: 100% 100%;
  }
  .psw_icon {
    width: 18px;
    height: 18px;
    background: url(../../assets/icon/login/psw.svg) no-repeat;
    background-size: 100% 100%;
  }

  .codeBtn {
    width: 80px;
    height: 23px;
    background: #f35446;
    font-size: 13px;
    color: #fff;
    position: absolute;
    right: 20px;
    bottom: 7px;
    outline: none;
    border: 0;
    border-radius: 11.5px;
  }
  .codeBtn.bb {
    background-color: #bbbbbb;
  }
}

</style>
